<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <button @click="getVal">获取元素内容</button>
        <h3 ref="title">生成随机数据，拦截Ajax请求</h3>
        <p ref="pp">Mock.js</p>
        <h3 ref="count" @click="addNum">我的数值是{{n}}</h3>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                n: 1
            },
            methods: {
                getVal() {
                    console.log(this.$refs);
                    this.$refs.title.style.color = 'red';
                    this.$refs.pp.style.fontSize = '20px'
                },
                addNum() {
                    this.n++;
                    // 数据更新是异步操作
                    // console.log(this.$refs.count.innerText); // 1
                    this.$nextTick(function () {
                        console.log(this.$refs.count.innerText);
                    })
                }
            },
        })
    </script>
</body>
</html>